<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" href="assets/img/logo.png">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UR Blog-DraftBox</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>UR Blog</title>
    <script
        type="text/javascript"> (function () { var css = document.createElement('link'); css.href = 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="assets/css/theme.css">
    <link type="text/css" href="css/button.css" rel="stylesheet">
    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/blog/">
    <link href="assets/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/blog_edit.css">
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <link rel="stylesheet" href="css/draft_box.css" />
    <script type="text/javascript" src="My97DatePicker/4.8/WdatePicker.js"></script>
    <script src="js/jquery_min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>
</head>

<body style="background-image: url(assets/images/backgrounds/2.jpg);">
    <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" style="opacity: 90%;">
        <a class="navbar-brand font-weight-bolder mr-3" href="index.html"><img src="assets/img/logo.png"
                style="width: 40px; height: 39px;"></a>
        <button class="navbar-light navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault"
            aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarsDefault">
            <ul class="navbar-nav ml-auto align-items-center">
                <li class="nav-item">
                    <a class="nav-link active" href="blog_list.html" style="cursor: pointer;">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="blog_edit.html" style="color: brown; cursor: pointer;">创作</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="person_center.html"><img class="rounded-circle mr-2"
                            src="assets/img/av.png" width="30"><span id="user" class="align-middle"></span></a>
                </li>
                <li class="nav-item">
                    <span class="dropdown-item"><a href="" onclick="logout()" class="btn btn-primary d-block"
                            class="fa fa-download">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
                                class="bi bi-door-open-fill" viewBox="0 0 16 16">
                                <path
                                    d="M1.5 15a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2.5A1.5 1.5 0 0 0 11.5 1H11V.5a.5.5 0 0 0-.57-.495l-7 1A.5.5 0 0 0 3 1.5V15H1.5zM11 2h.5a.5.5 0 0 1 .5.5V15h-1V2zm-2.5 8c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z" />
                            </svg> 登出</a></span>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container-fluid" style="height: 1000px;">
        <div class="row" style="height: 200px;"></div>
        <div class="row">
            <h1 class="font-weight-bold title" style="color:white; border: darkred;">草稿箱:</h1>
        </div>
        <div class="row">
            <div class="card-columns"
                style="width: 1700px; height: 300px; display: flex; border: solid; border-radius: 20px; background-color: black; opacity: 0.8; border-color: azure;">
                <!-- <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
                        style="width:500px">
                        <div class="col p-4 d-flex flex-column position-static">
                            <strong class="d-inline-block mb-2 text-primary">World</strong>
                            <h4 class="mb-0">第一篇博客</h4>
                            <div class="mb-1 text-muted">Nov 12</div>
                            <p class="card-text mb-auto">This is a wider card with supporting text below as a
                                natural lead-in to additional content.</p>
                            <a href="#" class="stretched-link">Continue reading</a>
                            <a href="#"></a>
                        </div>
                        <div class="col-auto d-none d-lg-block">
                            <svg class="bd-placeholder-img" width="200" height="250"
                                xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
                                focusable="false" role="img" aria-label="Placeholder: Thumbnail">
                                <title>Placeholder</title>
                                <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%"
                                    fill="#eceeef" dy=".3em">Thumbnail</text>
                            </svg>
                        </div>
                    </div> -->
            </div>
        </div>
        <div class="row" style="margin-top: 20px;">
            <span style="width: 487px;"></span>
            <button id="fe" onclick="firstPage()"
                style="border: solid; border-radius: 5px; width: 80px; cursor: pointer;">首页</button>
            <span style="width: 5px"></span>
            <button href="#" id="fe" onclick="prePage()"
                style="border: solid; border-radius: 5px; width: 80px; cursor: pointer; ">上一页</button>
            <span style="width: 5px"></span>
            <button href="#" id="fe" onclick="nextPage()"
                style="border: solid; border-radius: 5px; width: 80px;cursor: pointer;">下一页</button>
            <span style="width: 5px" onclick="lastPage()"></span>
            <button href="#" id="fe" onclick="lastPage()"
                style="border: solid; border-radius: 5px; width: 80px; cursor: pointer;">末页</button>
        </div>
    </div>
    <script src="js/jquery_min.js"></script>
    <script SRC="js/tools.js"></script>

    <!--左侧资料    -->

    <script>
        let artNum = 0;
        var pindex = 1;//当前的页码
        var psize = 3;//每页显示两条

        //初始化分页的参数，从url中获取pindex和psize
        function initPageParam() {
            var pi = getQueryVariable('pindex');
            if (pi != "") {
                pindex = pi;
            }
            var ps = getQueryVariable('psize');
            if (ps != "") {
                psize = ps;
            }
        }
        initPageParam();

        //查询分页数据
        function getList() {
            jQuery.ajax({
                url: '/art/list',
                type: 'get',
                data: {
                    "pindex": pindex,
                    "psize": psize,
                    "state": 0
                },
                success: function (body) {
                    if (body.code == 200 && body.data != null && body.data.length > 0) {
                        //获取存放博客列表的页
                        let container = document.querySelector(".card-columns");
                        console.log(body.data);
                        let n = 1;
                        for (let blog of body.data) {
                            //创建博客资料卡
                            let blogDiv = document.createElement('div');
                            blogDiv.className = "row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative";
                            blogDiv.style.marginTop = "20px";
                            if (n == 1) {
                                blogDiv.style.marginLeft = "20px";
                            } else if (n = 3) {
                                blogDiv.style.marginRight = "20px";
                            }
                            //博客左侧信息
                            let leftDiv = document.createElement('div');
                            leftDiv.className = "col p-4 d-flex flex-column position-static";
                            
                            leftDiv.style.width = "420px";
                            leftDiv.style.height = "248px";
                            leftDiv.style.backgroundColor = "white";
                            leftDiv.style.boxShadow = "10px 10px 5px -4px grey";
                            //分类
                            let catg = document.createElement('strong');
                            catg.className = "d-inline-block mb-2 text-primary";
                            catg.style.color = "#ff0000";
                            catg.innerHTML = "Blog";
                            leftDiv.appendChild(catg);
                            //标题
                            let title = document.createElement('h4');
                            title.className = "mb-0";
                            title.innerHTML = blog.title;
                            leftDiv.appendChild(title);
                            //日期
                            let date = document.createElement('div');
                            date.className = "mb-1 text-muted";
                            date.innerHTML = blog.createtime;
                            leftDiv.appendChild(date);
                            //内容
                            let content = document.createElement('p');
                            content.className = "card-text mb-auto";
                            content.innerHTML = blog.content;
                            leftDiv.appendChild(content);
                            //阅读更多
                            let more = document.createElement('a');
                            more.className = "stretched-link";
                            more.href = "blog_detail.html?blogId=" + blog.id;
                            more.innerHTML = "Continue reading"
                            leftDiv.appendChild(more);
                            //填充
                            let sp = document.createElement('a');
                            sp.href = "#";
                            leftDiv.appendChild(sp);
                            //将左侧信息添加到博客资料卡上
                            blogDiv.appendChild(leftDiv);
                            container.appendChild(blogDiv);
                            n += 1;
                        }
                    } else {
                        let container = document.querySelector(".card-columns");
                        let d = document.createElement('div');
                        d.innerHTML = "<h3>草稿箱空空如也~</h3>";
                        d.style.color = "white";
                        d.style.marginLeft="550px";
                        d.style.marginTop="100px";
                        d.style.height = "350px";
                        container.appendChild(d);
                        return;
                    }
                }
            })
        }
        getList();
        function getBlogsNum() {
            jQuery.ajax({
                type: 'get',
                url: '/art/getall',
                data: {
                    "state": 1
                }, success(body) {
                    artNum = body.data;
                },
                error: function (e) {
                    if (e.status == 401) {
                        location.href = "login.html";
                    }
                }
            });
        }
        getBlogsNum();

        function logout() {
            jQuery.ajax({
                type: 'post',
                url: '/user/logout',
                success: function (body) {
                    if (body.data == true) {
                        alert("注销成功");
                        location.href = "login.html";
                    } else {
                        alert("系统繁忙，注销失败");
                    }
                },
                error: function (body) {
                    alert("系统繁忙，注销失败");
                }
            })
        }

        //首页
        function firstPage() {
            location.href = "draft_box.html"
        }
        //上一页
        function prePage() {
            if (pindex <= 1) {
                alert("已经是第一页了！");
                return false;
            }
            pindex = parseInt(pindex) - 1;
            location.href = 'draft_box.html?pindex=' + pindex + "&psize=" + psize;
        }
        //下一页
        function nextPage() {
            //获取到总共有多少页
            var total = Math.ceil(artNum / psize);
            if (pindex == total) {
                alert("已经是最后一页了");
                return;
            }
            pindex = parseInt(pindex) + 1;
            location.href = 'draft_box.html?pindex=' + pindex + "&psize=" + psize;
        }
        //末页
        function lastPage() {
            //获取到总共有多少页
            var total = Math.ceil(artNum / psize);
            location.href = 'draft_box.html?pindex=' + total + "&psize=" + psize;
        }
    </script>

</body>

</html>